<template>
  <div class="container">
    <!-- 卡片 -->
    <el-card>
      <!-- 第一行  搜索、添加 -->
      <div class="searchAndAdd">
        <!-- 搜索区域 -->
        <div class="search">
          <!-- 表单 -->
          <el-form inline :model="queryData" ref="formRef">
            <!-- 关键字搜索 -->
            <el-form-item label="关键字">
              <el-input v-model="queryData.keyword"></el-input>
            </el-form-item>
            <!-- 状态搜索 -->
            <el-form-item label="状态">
              <el-select v-model="queryData.state">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 清除按钮 -->
            <el-form-item>
              <el-button @click="clearForm">清除</el-button>
            </el-form-item>
            <!-- 搜索按钮 -->
            <el-form-item>
              <el-button type="primary" @click="getArticles()">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 添加按钮区域 -->
        <div class="add">
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="$refs.addArticle.dialogVisible = true"
          >新增技巧</el-button>
        </div>
      </div>
       <!-- 警示信息 -->
      <el-alert :title="'数据一共'+total+'条'" type="info" show-icon :closable="false"></el-alert>
      <!-- 表格区域 -->
      <el-table :data="articlesList">
        <!-- 第一列 -->
        <el-table-column type="index" label="序号"></el-table-column>
        <!-- 第二列 -->
        <el-table-column label="文章标题">
          <template slot-scope="{row}">
            <span>{{ row.title }}</span>
            <i :class="[row.videoURL?'el-icon-film':'']" style="color:blue" @click="showVideo(row.videoURL)"></i>
          </template>
        </el-table-column>
        <!-- 第三列 -->
        <el-table-column label="阅读数" prop="visits" width="120px"></el-table-column>
        <!-- 第四列 -->
        <el-table-column label="录入人" prop="username" width="160px"></el-table-column>
        <!-- 第五列 -->
        <el-table-column label="录入时间" width="180px">
          <template slot-scope="{row}">{{row.createTime|dataFormat}}</template>
        </el-table-column>
        <!-- 第六列 -->
        <el-table-column label="状态" width="180px">
          <template slot-scope="{row}">
            <span v-if="row.state==0">已禁用</span>
            <span v-else-if="row.state==1">已启用</span>
          </template>
        </el-table-column>
        <!-- 第七列 -->
        <el-table-column label="操作" width="180px">
          <template slot-scope="{row}">
            <a  @click="preview(row)">预览</a>
            <a  @click="stateChange(row)">{{row.state==0?'启用':'禁用'}}</a>
            <a :class="[row.state?'active':'disabled']" @click="edit(row.id)">修改</a>
            <a :class="[row.state?'active':'disabled']" @click="deleteAriticle(row.id)">删除</a>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="block" type="flex">
        <el-pagination
          style="margin: 20px 0; text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.page"
          :page-sizes="[5,10,15,20]"
          :page-size="queryData.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total="total"
          hide-on-single-page
        ></el-pagination>
      </div>
    </el-card>
    <!-- 视频弹出框 -->
    <el-dialog :visible.sync="dialogVisible" width="50%" center class="box" @close="closedVideo">
      <i class="el-icon-error close" @click="dialogVisible=false"></i>
     <video :src="videoURL" style="width:100%"></video>
    </el-dialog>
    <!-- 添加/修改文章弹出框 -->
    <article-add ref="addArticle"></article-add>
    <!-- 预览文章弹出框 -->
    <article-preview ref="previewActicle"></article-preview>
  </div>
</template>

<script>
import { list, remove, detail, changeState, simple } from '@/api/hmmm/articles'

import articleAdd from '../components/articles-add'
import articlePreview from '../components/articles-preview'

import moment from 'moment'

export default {

  data () {
    return {
      queryData: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      articlesList: [],
      total: 0,
      options: [
        {
          value: '0',
          label: '已禁用'
        },
        {
          value: '1',
          label: '已启用'
        }
      ],
      dialogVisible: false,
      videoURL: ''

    }
  },
  mounted () {
    this.getArticles()
  },
  components: {
    articleAdd,
    articlePreview
  },
  methods: {
    // 获取文章列表
    async getArticles () {
      const res = await list(this.queryData)
      // console.log(this.queryData)
      // console.log(res)
      if (res.status !== 200) return this.$message.error('获取文章列表失败')

      this.articlesList = res.data.items
      this.total = res.data.counts
    },
    // 切换条数
    handleSizeChange (val) {
      // console.log(val)
      this.queryData.pagesize = val
      this.getArticles()
    },
    // 总记录数
    handleCurrentChange (val) {
      // console.log(val)
      this.queryData.page = val
      this.getArticles()
    },
    // 清除表单
    clearForm () {
      this.queryData.keyword = ''
      this.queryData.state = null
      this.getArticles()
    },
    // 删除文章
    async deleteAriticle (id) {
      const result = await this.$confirm(
        '此操作将永久删除该文章, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (result !== 'confirm') return this.$message.info('取消了删除')
      const res = await remove({ id: id })
      // console.log(res)
      if (res.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.getArticles()
    },
    // 编辑文章
    async edit (id) {
      this.$refs.addArticle.editDialogVisible = true
      const res = await detail({ id: id })
      console.log(res)
      if (res.status !== 200) return this.$message.error('获取文章详情失败')
      this.$refs.addArticle.editForm = res.data
    },
    // 状态变化
    async stateChange (article) {
      const res = await changeState({
        id: article.id,
        state: article.state === 1 ? '0' : '1'
      })
      if (res.status !== 200) {
        return this.$notify.error({
          message: '修改状态失败',
          offset: 200,
          position: 'top-right',
          duration: 500
        })
      } else {
        this.$notify({
          message: '修改状态成功',
          type: 'success',
          offset: 200,
          position: 'top-right',
          duration: 500
        })
        this.getArticles()
      }
    },
    // 预览文章
    async preview (article) {
      this.$refs.previewActicle.previewDialogVisible = true

      const res = await simple(article)
      // console.log(res.config.params)
      if (res.status !== 204) return this.$message.error('获取数据失败')
      this.$refs.previewActicle.article = res.config.params
    },
    // 视频
    showVideo (url) {
      this.dialogVisible = true
      const regvideoURL = /^https?:\/\/(.+\/)+.+(\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4))$/i
      this.videoURL = regvideoURL.test(url) ? url : ''
      this.videoURL = url
      this.$nextTick(() => {
        document.querySelector('video').play()
      })
    },
    // 监听弹出框的关闭事件
    closedVideo () {
      document.querySelector('video').pause()
    }
  },
  // 日期
  filters: {
    dataFormat: function (date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  // padding: 15px;
  margin: 10px 10px;
  .searchAndAdd {
    display: flex;
    justify-content: space-between;
  }
  .el-table {
    margin: 10px 0;
  }
  .el-icon-film{
    padding-left: 8px;
  }
  a {
    padding-right: 10px;
    color: #50a4f8;
  }
  a.disabled {
    pointer-events: none;
    color:inherit;
    filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
    -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
    opacity: 0.5; /*其他，透明度50%*/
  }
  ::v-deep .box{
    top: 15%;
    .el-dialog__header{
      padding: 0;
      .el-dialog__headerbtn{
        font-size: 0;
      }
    }
    .el-dialog__body{
      padding: 0;
      font-size: 0;
        .close{
          font-size: 40px;
          position: absolute;
          left: 50%;
          top: -50px;
        }
      }
    }
}
</style>
